import typeManger from '../uploadTypeComponent/typeManger.js';

let file_upload = (function () {
    /*
    * 该组件用于上传文件
    * */
    let list = {
        /*
        * 文件上传的列表,单独做成组件因为这样能简单的获取到typeManger数组中,对象的name值
        * */
        props:['name'],
        template:
            '<li :id="name" @click="routerSwitch">{{name}}</li>',
        data:function () {

            return {
                routerSwitchFlag:this.$props.name
            }
        },
        methods:{
            routerSwitch:function () {
                /*给予点击事件使用,点击事件触发时,会往路由器中填入相应路径*/
                this.$router.push(this.routerSwitchFlag)
            }
        }
    };

    let upload_type = {
        /*
        * 负责文件类型列表的逻辑,并给地址栏组件传递宽高
        * */
        props:['width','height'],
        template:
        '<div id="upload_type" :style=[upload_type_style] >' +
        '<ul>' +
        '<list v-for="num in typeList.typeManger" :key="num.name" :name="num.name" :style=[listStyle]></list>' +
        '</ul>' +
        '</div>',
        data:function () {

            return {
                upload_type_style:{
                    position:'relative',
                    display:'inline-block',
                    backgroundColor:'#464646',
                    width:this.$props.width+'px',
                    height:this.$props.height+'px',
                },
                listStyle:{
                    position:'block',
                    backgroundColor:'#000000',
                    display:'block',
                    textAlign:'center',
                    cursor:'Pointer',
                    color:'#c1c1c1',
                    fontSize:this.getFontSize()+'px',
                    width:this.$props.width+'px',
                    height:this.getLiHeight()+'px',
                },
                typeList:{
                    typeManger:typeManger
                }
            }
        },
        methods:{
            getLiHeight:function () {
                return 30;
            },
            getFontSize:function () {
                return this.getLiHeight()-5;
            },
        },
        components:{
            list:list
        }
    };


    let root = {
        /*所有子组件的根组件*/
        /*定义整个程序的最大宽高与其他初始参数*/
        // el:'#root_fileUpload',
        template:
        '<div :style=[fileUpload_style]>'+
        '<upload-type :width="uploadTypeProps.width" :height="uploadTypeProps.height" ></upload-type>'+
        '<router-view :propsStyle="addressBarStyle"></router-view>'+
        '</div>',
        data:function(){
            return {
                fileUpload_style:{
                    position:'absolute',
                    display:'inline-block',
                    width:this.getWinWidth()+'px',
                    height:this.getWinHeight()+'px'
                },
                uploadTypeProps:{
                    width:this.uploadType_w(),
                    height:this.getWinHeight()
                },
                addressBarStyle:{
                    /*
                    * 该样式用于传递给vue-router的子组件,必须在父组件中固定数值
                    * 比如在宽高后面加上px单位
                    * */
                    float:'right',
                    width:this.addressBar_w()+'px',
                    height:this.getWinHeight()+'px'
                }
            }
        },
        methods:{
            uploadType_w:function () {
                return 200;
            },
            getWinWidth:function () {
                return window.innerWidth;
            },
            getWinHeight:function () {
                return window.innerHeight-1;
            },
            addressBar_w:function () {
                return this.getWinWidth()-this.uploadType_w();
            }
        },
        components:{
            'upload-type':upload_type
        }

    };
    return {
        root:root
    }

})();

export default file_upload;